import {ColumnsType} from "antd/es/table";
import {Popconfirm, Space} from "antd";
import {Link} from "react-router-dom";
import {ellipsisHandler} from "../util/ColumnsUtil";
import {Consume} from "../type/Consume";
import {fetchDeleteConsume} from "../redux/reducer/async/consumeAsyncAction";
import {MATHEMATICAL_PRECISION} from "../constant/Common";
import GlobalHandler from "../global/GlobalHandler";

const consumeColumns: ColumnsType<Consume> = [
    {
        dataIndex: 'index',
        title: '序号' ,
        width: 60,
        align: "center" ,
        render: (_,__, index) => {
            return <strong> {index + 1} </strong> ;
        }
    },
    {
        key: 'id',
        dataIndex: 'id' ,
        title: '数据编号',
        width: 110,
        align: "center" ,
    },
    {
        key: 'item',
        dataIndex: 'item' ,
        title: '消费项目',
        width: 110,
        align: "center" ,
    },
    {
        key: 'money',
        dataIndex: 'money' ,
        title: '消费金额',
        width: 110,
        align: "center" ,
        render: value => value / MATHEMATICAL_PRECISION
    },
    {
        key: 'consumeDate',
        dataIndex: 'consumeDate' ,
        title: '消费日期',
        width: 110,
        align: "center" ,
    },
    {
        key: 'order',
        dataIndex: 'order' ,
        title: '排序',
        width: 110,
        align: "center" ,
    },
    {
        key: 'explain',
        dataIndex: 'explain' ,
        title: '消费说明',
        align: "center" ,
        width: 110,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        key: 'remark',
        dataIndex: 'remark' ,
        title: '备注信息',
        align: "center" ,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        title: '操作',
        dataIndex: 'option' ,
        align: "center",
        width: 100,
        render: (_, record) => {
            return (
                <Space>
                    <Link key={"user-update"} to={'update'} state={record}>更新</Link>
                    <Popconfirm title={"是否要确认删除?"} onConfirm={() => deleteHandler(record.id)}>
                        <a key={"user-delete"}>删除</a>
                    </Popconfirm>
                </Space>
            ) ;
        }
    }

] ;

const deleteHandler = async (id: number) => {
   let res = await GlobalHandler.getInstance().executeDispatchAsync(fetchDeleteConsume(id)) ;
   if (res.result){
       GlobalHandler.getInstance().sendSuccessMessage("删除报销记录成功!") ;
   }else {
       GlobalHandler.getInstance().sendErrorMessage("删除报销记录失败!") ;
   }
} ;

export default consumeColumns ;
